import { Modal, Pagination } from 'antd'
import { useEffect } from 'react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ListCard from '../../components/ListCard'
import MyCard from '../../components/MyCard'
import './index.css'

export default () => {
  const [data, setData] = useState([])
  const navigate = useNavigate()
  const [modal, contextHolder] = Modal.useModal()
  useEffect(() => {
    if (!localStorage.getItem('info')) {
      modal.error({
        title: '权限错误!',
        content: '当前用户未登录，请先前往登录界面登录',
        onOk: () => {
          navigate('/center/login')
        }
      })
      return
    }
    let temp = JSON.parse(localStorage.getItem('myLikes'))
    console.log(temp)
    if (temp === null) {
      temp = []
    }
    temp = temp.map((item, index) => {
      item.key = index
      item.isLike = true
      return item
    })

    setData(temp)
  }, [])

  return (
    <MyCard
      style={{
        display: 'flex',
        flexDirection: 'column',
        maxWidth: '800px',
        alignItems: 'center'
      }}
    >
      <div className="MyLikes">
        <h3>收藏列表</h3>
        {data.map((item, index) => {
          return (
            <div
              key={item.date}
              style={{
                padding: '0 20px',
                width: '80%',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}
            >
              <ListCard style={{ flex: '1', display: 'flex', justifyContent: 'left' }}>
                <label style={{ marginRight: '5px' }}>{index + 1}</label>
                <a
                  onClick={() => {
                    let history = JSON.parse(localStorage.getItem('history'))
                    if (history === null) {
                      history = []
                    }
                    const date = new Date()
                    history.unshift({
                      course_name: item.course_name,
                      course_url: item.course_url,
                      date: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
                    })
                    localStorage.setItem('history', JSON.stringify(history))
                  }}
                  target="_blank"
                  href={item.course_url}
                >
                  {item.course_name}
                </a>
              </ListCard>
              <div
                style={{ cursor: 'pointer' }}
                onClick={e => {
                  const temp = []
                  const newData = JSON.parse(localStorage.getItem('myLikes'))
                  data.forEach(it => {
                    if (item.key === it.key) {
                      if (it.isLike) {
                        // 取消收藏
                        localStorage.setItem(
                          'myLikes',
                          JSON.stringify(
                            newData.filter(q => {
                              return q.date !== it.date
                            })
                          )
                        )
                      } else {
                        newData.push(it)
                        localStorage.setItem('myLikes', JSON.stringify(newData))
                      }
                      it.isLike = !it.isLike
                    }

                    temp.push(it)
                  })
                  setData(temp)
                }}
              >
                {item?.isLike ? (
                  <svg width="19" height="25" viewBox="0 0 19 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M0 2.34375V23.8135C0 24.4678 0.539323 25 1.20234 25C1.44974 25 1.69219 24.9268 1.89505 24.7852L9.5 19.5312L17.1049 24.7852C17.3078 24.9268 17.5503 25 17.7977 25C18.4607 25 19 24.4678 19 23.8135V2.34375C19 1.0498 17.9362 0 16.625 0H2.375C1.0638 0 0 1.0498 0 2.34375Z"
                      fill="#FF6741"
                    />
                  </svg>
                ) : (
                  <svg width="19" height="26" viewBox="0 0 19 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M16.625 0H2.375C1.06331 0 0 1.09129 0 2.4375V24.3699C0 25.6242 1.32555 26.4052 2.38094 25.7735L9.5 21.5109L16.6201 25.773C17.674 26.3605 19 25.6242 19 24.3699V2.4375C19 1.09129 17.9362 0 16.625 0ZM16.625 22.9531L9.5 18.6875L2.375 22.9531V2.74219C2.375 2.57105 2.50513 2.4375 2.62734 2.4375H16.2836C16.4964 2.4375 16.625 2.57105 16.625 2.74219V22.9531Z"
                      fill="#FF6741"
                    />
                  </svg>
                )}
              </div>
            </div>
          )
        })}
      </div>
      {/* <Pagination style={{ marginTop: '20px', width: '100%', textAlign: 'center' }} defaultCurrent={6} total={500} onChange={onChange} showSizeChanger={false} /> */}
      {contextHolder}
    </MyCard>
  )
}
